<template>
    <el-dialog :title="title" :visible.sync="showLotsAdd" width="950px" :before-close="roleclose">
        <el-form :model="addLotsForm" :rules="rulesLotsAdd" ref="addLotsForm" label-width="110px" class="d_m_height formStyle">
            <el-form-item label="标的类型" prop="type_id">
                <el-cascader
                    ref="cascaderType"
                    v-model="addLotsForm.type_id"
                    :options="type_idOptions"
                    :show-all-levels="false"
                    size="mini"
                    style="width:90%">
                  </el-cascader>
            </el-form-item>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="标的名称" prop="name">
                        <el-input v-model="addLotsForm.name" size="mini" placeholder="请输入标的名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计量单位" prop="unit">
                        <el-input v-model="addLotsForm.unit" size="mini" placeholder="请输入计量单位"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="预估数量" prop="amount">
                        <el-input v-model="addLotsForm.amount" size="mini" placeholder="请输入预估数量"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="保留单价(元)" prop="min_price">
                        <el-input v-model="addLotsForm.min_price" size="mini" placeholder="请输入保留单价"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="起始单价(元)" prop="start_price">
                        <el-input v-model="addLotsForm.start_price" size="mini" placeholder="请输入起始单价"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="保证金(元)" prop="bond">
                        <el-input v-model="addLotsForm.bond" size="mini" placeholder="请输入保证金"></el-input>
                        <!-- <span class="span_lh">默认为20%,可修改,不低于10%</span> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="是否含税" prop="taxnum">
                        <el-select v-model="addLotsForm.taxnum" size="mini" placeholder="请选择">
                            <el-option
                            v-for="item in taxnumOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="报名限制" prop="applicantstype">
                        <el-select v-model="addLotsForm.applicantstype" size="mini" placeholder="请选择">
                            <el-option
                            v-for="item in applicantstypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="特殊资质" prop="certification">
                        <el-select v-model="addLotsForm.certification" size="mini" placeholder="请选择">
                            <el-option
                            v-for="item in certificationOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="标的图片" prop="images">
                        <el-upload 
                        class="upload-demo" 
                        :action="imgurls + '/entrust/Common/upload'" 
                        :on-success="fileSuccessImg"
                        :on-remove="handleRemove"
                        :file-list="fileList_img" 
                        :limit="5"
                        multiple>
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">文件大小不超过10MB</div>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="标的清单">
                        <el-upload class="upload-demo" :action="imgurls + '/entrust/Common/file'" :on-success="fileSuccessFile"
                        :file-list="fileList_file" :on-remove="filehandleRemove" :limit="1" multiple>
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">文件大小不超过10MB</div>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="confirmAddform">保 存</el-button>
          </div>
    </el-dialog>
</template>

<script>
import {lotsType,LotsAdd} from '@/api/release'
import {uploadCommon,fileCommon} from '@/api/user'
import { mapState } from 'vuex';
export default {
    props:{
        title:[String],
        showLotsAdd:[Boolean],
    },
    data(){
        return{
            type_idOptions:[],//标的类型下拉菜单数据
            taxnumOptions:[
                {
                value: '否',
                label: '否'
                },{
                value: '含税3%(普票)',
                label: '含税3%(普票)'
                },{
                value: '含税13%(普票)',
                label: '含税13%(普票)'
                },{
                value: '含税2%(普票)',
                label: '含税2%(普票)'
                },{
                value: '含税6%(普票)',
                label: '含税6%(普票)'
                },{
                value: '含税3%(专票)',
                label: '含税3%(专票)'
                },{
                value: '含税13%(专票)',
                label: '含税13%(专票)'
                },
            ], // 是否含税下拉菜单数据
            applicantstypeOptions:[
                {
                value: '0',
                label: '不限'
                }, {
                value: '1',
                label: '仅限个人用户报名'
                },{
                value: '2',
                label: '仅限企业用户报名'
                }
            ], //报名限制下拉菜单数据
            certificationOptions:[
                {
                value: '0',
                label: '无要求'
                }, {
                value: '1',
                label: '钢结构拆装'
                },{
                value: '2',
                label: '危废'
                },{
                value: '3',
                label: '废旧回收'
                }
            ], //特殊资质 下拉菜单数据
            addLotsForm:{
                type_id:'',
                type_label:'',
                name:"",
                unit:"",
                amount:"",
                min_price:"",
                start_price:"",
                bond:"",
                taxnum:"",
                applicantstype:"",
                certification:"",
                images:"",
                inventory:"",
                company_id:"",

            },
            rulesLotsAdd:{
                type_id:[{ required: true, trigger: 'change',message:'请选择标的类型'}],
                name:[{ required: true, trigger: 'blur',message:'请输入标的名称'}],
                unit:[{ required: true, trigger: 'blur',message:'请输入计最单位'}],
                amount:[{ required: true, trigger: 'blur',message:'请输入预估数量'}],
                min_price:[{ required: true, trigger: 'blur',message:'请输入保留单价'}],
                start_price:[{ required: true, trigger: 'blur',message:'请输入起始单价'}],
                bond:[{ required: true, trigger: 'blur',message:'请输入保证金'}],
                taxnum:[{ required: true, trigger: 'change',message:'请选择是否含税'}],
                applicantstype:[{ required: true, trigger: 'change',message:'请选择报名限制'}],
                certification:[{ required: true, trigger: 'change',message:'请选择特殊资质'}],
                images:[{ required: true, trigger: 'change',message:'请上传标的图片'}],
                inventory:[{ required: true, trigger: 'change',message:'请上传标的清单'}],
            },
            fileList_img:[], //图片列表数组
            imgsList:[], //图片路径
            fileList_file:[], //文件列表数组
            filesList:[],//文件路径
        }
    },
    created(){
        this.getPageData();
        this.addLotsForm.taxnum='含税13%(专票)';
        this.addLotsForm.applicantstype='0';
        this.addLotsForm.certification='0';
        this.addLotsForm.notarize_time='24';
    },
    computed:{
        ...mapState('user',['userInfo'])
    },
    methods:{
        
        getPageData(){
            lotsType().then(res => {
                this.disposeLotsType(res.data);
                
            });
        },
        // 
        confirmAddform(){
            if(this.imgsList.length>0){
                this.addLotsForm.images=this.imgsList.join(",");
            }
            if(this.filesList.length>0){
                this.addLotsForm.inventory = this.filesList.join(",");
            }
             this.$refs.addLotsForm.validate((valid) => {
                if (valid) {
                    this.addLotsForm.company_id = this.userInfo.company_id;
                    var l =this.addLotsForm.type_id.length-1;
                    this.addLotsForm.type_id = this.addLotsForm.type_id[l];
                    
                    let cascader = this.$refs.cascaderType.getCheckedNodes();
                    this.addLotsForm.type_label= cascader[0].label;
                    this.$store.dispatch('user/setLotsData',JSON.parse(JSON.stringify(this.addLotsForm)));
                    this.clearWord();
                    this.$emit('showListLots');
                }
            })
        },
        //点击取消
        cancelBtn(){
            this.clearWord();
        },
        //点击查号弹窗关闭
        roleclose(){
            this.clearWord();
        },
        disposeLotsType(data){
            var arr = [];
            data.forEach((item) => {
                //一级分类
                if(!item.pid){
                    arr.push({
                    value:item.id,
                    label:item.classname,
                    children:[]
                    });
                }
                
                for (const elem of data) {
                    if (item.id === elem.pid) {
                    arr.forEach((ite) => {
                        if (ite.value === elem.pid) {
                        ite.children.push({
                            value:elem.id,
                            label:elem.classname,
                        });
                        }
                    });
                    }
                }
            });
            this.type_idOptions = arr;
        },
        
        // 上传标的图片
        fileSuccessImg(res, file){
            this.$message({
            message: res.msg,
            type: "success",
            });
            this.imgsList.push(res.data.id);
        },
        handleRemove(file, fileList){
            this.fileList_img = fileList;
            var arr=[];
            fileList.forEach(item => {
                arr.push(item.response.data.id);
            });
            this.imgsList = arr;
        },
        //上传标的清单
        fileSuccessFile(res, file){
            this.$message({
            message: res.msg,
            type: "success",
            });
            this.filesList.push(res.data.id);
        },
        filehandleRemove(file, fileList){
            this.fileList_file = fileList;
            var arr=[];
            fileList.forEach(item => {
                arr.push(item.response.data.id);
            });
            this.filesList = arr;
        },
        clearWord(){
            
            this.$refs.addLotsForm.resetFields();
            this.fileList_img=[];//图片列表数组
            this.imgsList=[]; //图片路径
            this.fileList_file=[]; //文件列表数组
            this.filesList=[];//文件路径
            this.$emit('cancelDiaAdd');
        },
    }
}
</script>

<style lang="scss" scoped>
   .formStyle{
        .el-form-item{
            margin-bottom: 16px;
            ::v-deep .el-form-item__content{
                line-height: 32px;
                .span_lh{
                    color: #F56C6C;
                }
            }
            ::v-deep .el-form-item__label{
                line-height: 32px;
            }
        }
        
   }
</style>
  